<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客户管理</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}"></script>
    <script type="text/javascript">
        function tipOpen(ele) {
            var status = $(ele).prev().prev().val();
            var cid = $(ele).prev().val();
            if (status == 1) {
                $(".tipright p").text("是否确认注销此条信息?");
            } else {
                $(".tipright p").text("是否确认恢复此条信息?");
            }
            $("#cid2").val(cid);

            $("#tip").fadeIn(200);
        }

        function tipClose() {
            $("#tip").fadeOut(200);
        }

        function allottipOpen(ele) {
            $("#allottip").fadeIn(200);
            var cid = $(ele).prev().prev().val();
            $("#cid1").val(cid);
        }

        function allottipclose() {
            $("#allottip").fadeOut(200);
        }

        function allottipConfirm(ele) {
            $("#allottip").fadeOut(200);
            var cid = $(ele).prev().val();
            var uid = $("select[name=name]").val();
            window.location.href = "/erp/market/customer/editFenPei?id=" + cid + "&uid=" + uid;
        }

        function tipConfirm(ele) {
            $("#allottip").fadeOut(200);
            var cid = $(ele).prev().val();
            window.location.href = "/erp/market/customer/editStatus?id=" + cid;
        }
    </script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>客户管理</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form id="form" th:action="@{/market/customer/findPageAll}" method="get">
        <input type="hidden" id="pageNum" name="pageNum"/>
        <ul class="tools">
            <li> 公司名称:
                <input placeholder="请输入名称" type="text" size="12" name="company" th:value="${custom==null?'':custom.company}"/>
            </li>
            <li> 客户姓名:
                <input placeholder="请输入姓名" type="text" size="12" name="customname" th:value="${custom==null?'':custom.customname}"/>
            </li>
            <li> 所属区域：
                <select name="pid">
                    <option value="0">请选择省份</option>
                    <option th:each="p : ${session.provinceList}" th:selected="${pid==p.id}" th:value="${p.id}"
                            th:text="${p.pName}">北京
                    </option>
                </select>
                <input type="hidden" th:value="${cid}" name="cid"/>
                <select name="address">
                    <option value="0">请选择城市</option>
                </select>
            </li>
            <script>
                $(function () {
                    ajaxCid($("select[name=pid]").val());

                    $("select[name=pid]").change(function () {
                        ajaxCid($(this).val());
                    });
                });

                function ajaxCid(pid) {
                    $.ajax({
                        url: "/erp/market/customer/ajaxCityPid",
                        data: {"pid": pid},
                        dataType: "JSON",
                        success: function (data) {
                            var op = "<option value='0'>请选择城市</option>";
                            $.each(data, function (i, e) {
                                if (e.id == $("input[name=cid]").val()) {
                                    op += "<option value='" + e.id + "' selected>" + e.cname + "</option>";
                                } else {
                                    op += "<option value='" + e.id + "'>" + e.cname + "</option>";
                                }
                            });
                            $("select[name=address]").html("");
                            $("select[name=address]").append(op);

                        }, error: function () {
                            console.log("错误");
                        }
                    });
                }
            </script>

            <li> 状态：
                <select name="status">
                    <option value="0">请选择</option>
                    <option value="1" th:selected="${custom==null?false:custom.status==1}">可用</option>
                    <option value="2" th:selected="${custom==null?false:custom.status==2}">不可用</option>
                </select>
            </li>
            <li> 是否分配：
                <select name="allot">
                    <option value="0">请选择</option>
                    <option value="1" th:selected="${allot==1}">已分配</option>
                    <option value="2" th:selected="${allot==2}">未分配</option>
                </select>
            </li>
            <li class="subBut" onclick="tiaoZhuan(1)"><img th:src="@{/images/t06.png}"/>查询</li>
            <li class="subBut" onclick="window.location.href='customerAdd.html'"><img th:src="@{/images/t01.png}"/>添加</li>
            <li class="subBut" onclick="qingkong()"><img th:src="@{/images/t03.png}"/>重置</li>
            <script>
                function qingkong() {
                    $("input[name=company]").val("");
                    $("input[name=customname]").val("");
                    $("select[name=pid]>option:eq(0)").prop("selected",true);
                    $("input[name=cid]").val("");
                    $("select[name=allot]>option:eq(0)").prop("selected",true);
                    $("select[name=status]>option:eq(0)").prop("selected",true);
                    ajaxCid($("select[name=pid]").val());
                }
            </script>
        </ul>
        <table class="tablelist">
            <thead>
            <tr>
                <th>序号</th>
                <th>客户姓名</th>
                <th>性别</th>
                <th>联系电话</th>
                <th>所属公司</th>
                <th>所属区域</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>创建人</th>
                <th>分配时间</th>
                <th>客服人员</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="c,i :${session.pb.list}">
                <td th:text="${(session.pb.pageNum-1)*session.pb.pageSize+i.count}">1</td>
                <td th:text="${c.customname}">王金平</td>
                <td th:text="${c.sex==1?'女':'男'}">男</td>
                <td th:text="${c.telephone}">17370899727</td>
                <td th:text="${c.company}">阿里巴巴</td>
                <td th:text="${c.address==null?'':c.city.province.pName+' '+c.city.cName}">江苏南京</td>
                <td th:text="${c.status==1?'可用':'不可用'}">可用</td>
                <td th:text="${c.createtime}">2013-09-09 15:05:05</td>
                <td th:text="${c.createid==null?'':c.createUser.uname}">管理员</td>
                <td th:text="${c.serviceid==0 || c.status==2?'':c.distractime}"></td>
                <td th:text="${c.serviceid==0 || c.status==2?'':c.serviceUser.uname}"></td>
                <td>
                    <a th:href="@{'/market/customer/findBy?id='+${c.customid}}" class="tablelink">查看详情</a>
                    <a th:if="${c.status==1}" th:href="@{'/market/customer/goEditCustom?id='+${c.customid}}" class="tablelink">修改</a>
                    <input th:value="${c.status}" type="hidden"/>
                    <input th:value="${c.customid}" type="hidden"/>
                    <a href="javascript:void(0)" th:text="${c.status==1?'注销':'恢复'}" class="tablelink"
                       onclick="tipOpen(this)">注销</a>
                    <a href="javascript:void(0);" class="tablelink" th:if="${c.status==1}"
                       onclick="allottipOpen(this)" th:text="${c.serviceid==0?'分配':'重新分配'}">分配</a>

                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagin">
            <div class="message">共<i class="blue" th:text="${pb.total}">1256</i>条记录，当前显示第&nbsp;<i class="blue"
                                                                                                  th:text="${pb.pageNum}">2&nbsp;</i>页
            </div>
            <ul class="paginList">
                <li class="paginItem">
                    <a href="javascript:void(0);" th:onclick="tiaoZhuan([[${pb.isFirstPage?1:pb.pageNum-1}]])">
                        <span th:class="${pb.isFirstPage?'pagepre':'pagenxt roate'}"></span>
                    </a>
                </li>

                <li class="paginItem" th:if="${1+4<=pb.pageNum}"><a th:onclick="tiaoZhuan(1)"
                                                                    href="javascript:void(0);">1</a></li>
                <li class="paginItem more" th:if="${1+5<=pb.pageNum}"><a href="javascript:void(0);">...</a></li>
                <li class="paginItem" th:if="${1+3<=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pageNum-3}]])"
                                                                    href="javascript:void(0);"
                                                                    th:text="${pb.pageNum-3}">3</a></li>
                <li class="paginItem" th:if="${1+2<=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pageNum-2}]])"
                                                                    href="javascript:void(0);"
                                                                    th:text="${pb.pageNum-2}">4</a></li>
                <li class="paginItem" th:if="${1+1<=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pageNum-1}]])"
                                                                    href="javascript:void(0);"
                                                                    th:text="${pb.pageNum-1}">1</a></li>

                <li class="paginItem current"><a href="javascript:void(0);" th:text="${pb.pageNum}">2</a></li>

                <li class="paginItem" th:if="${pb.pages-1>=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pageNum+1}]])"
                                                                           href="javascript:void(0);"
                                                                           th:text="${pb.pageNum+1}">3</a></li>
                <li class="paginItem" th:if="${pb.pages-2>=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pageNum+2}]])"
                                                                           href="javascript:void(0);"
                                                                           th:text="${pb.pageNum+2}">4</a></li>
                <li class="paginItem" th:if="${pb.pages-3>=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pageNum+3}]])"
                                                                           href="javascript:void(0);"
                                                                           th:text="${pb.pageNum+3}">5</a></li>
                <li class="paginItem more" th:if="${pb.pages-5>=pb.pageNum}"><a href="javascript:void(0);">...</a></li>
                <li class="paginItem" th:if="${pb.pages-4>=pb.pageNum}"><a th:onclick="tiaoZhuan([[${pb.pages}]])"
                                                                           href="javascript:void(0);"
                                                                           th:text="${pb.pages}">10</a></li>

                <li class="paginItem">
                    <a href="javascript:void(0);" th:onclick="tiaoZhuan([[${pb.isLastPage?pb.pages:pb.pageNum+1}]])">
                        <span th:class="${pb.isLastPage?'pagepre roate ':'pagenxt '}"></span>
                    </a>
                </li>
            </ul>
        </div>
    </form>
    <script>
        function tiaoZhuan(pageNum) {
            $("#pageNum").val(pageNum);
            $("#form").submit();
        }
    </script>
    <!-- 提示框 -->
    <div id="tip" class="tip">
        <div class="tiptop"><span>提示信息</span><a onclick="tipClose()"></a></div>
        <div class="tipinfo"><span><img th:src="@{/images/ticon.png}"/></span>
            <div class="tipright">
                <p></p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite></div>
        </div>
        <div class="tipbtn">
            <input type="hidden" id="cid2"/>
            <input name="" type="button" class="sure" value="确定" onclick="tipConfirm(this)"/>
            &nbsp;
            <input name="" type="button" class="cancel" value="取消" onclick="tipClose()"/>
        </div>
    </div>
    <!-- 审批提示框 -->
    <div id="allottip" class="tip">
        <div class="tiptop">
            <span>提示信息</span><a onclick="allottipclose()"></a>
        </div>
        <div class="tipinfo1">
            部门：
            <select class="dfselect" disabled="disabled">
                <option>请选择</option>
                <option selected="selected">市场部</option>
                <option>采购部</option>
                <option>财务部</option>
            </select>
            <p/>
            职位：
            <select class="dfselect"  disabled name="deptId">
                <option value="0" >请选择</option>
                <option th:selected="${j.jobId==3}" th:each="j :${jobList}" th:value="${j.jobId}" th:text="${j.jobName}">三组组员</option>
            </select>
            <p/>
            姓名：
            <select class="dfselect" name="name">
                <option value="0">请选择</option>
            </select>
            <p/>
        </div>
        <div class="tipbtn">
            <input type="hidden" id="cid1"/>
            <input name="" type="button" class="sure" value="确定" onclick="allottipConfirm(this)"/>
            &nbsp;
            <input name="" type="button" class="cancel" value="取消" onclick="allottipclose()"/>
        </div>
    </div>
    <script>
        $(function () {
            $.ajax({
                url: "/erp/market/customer/ajaxJobId",
                data: {"jobId": $("select[name=deptId]").val()},
                dataType: "JSON",
                success: function (data) {
                    var op = "<option value='0' selected>请选择</option>";
                    $.each(data, function (i, e) {
                        op += "<option value='" + e.uid + "'>" + e.uname + "</option>";
                    });
                    $("select[name=name]").html("");
                    $("select[name=name]").append(op);

                }, error: function () {
                    console.log("错误");
                }
            });
        });
    </script>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
